<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>USIG - Mapa Interactivo de Buenos Aires</title>
	
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css" />        
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>  
	<script src="js/jquery.mobile-1.3.1.min.js"></script>
	
    <link rel="stylesheet" type="text/css" href="css/ejemplos.css" />

	<script src="js/usig.MapaInteractivo.min.js" type="text/javascript"></script> 
	<script src="js/usig.Punto.min.js" type="text/javascript"></script> 
    	
  
    
	<script type="text/javascript">
	$.noConflict();
	jQuery(document).ready(function($) {
		
		var mapHeight = jQuery(document).height() - $('#header').height() - $('#footer').height() - 4;
		var mapWidth = $('#content').width();
		
		$('#mapa').css('width', mapWidth).css('height', mapHeight);
		
		var mapa = new usig.MapaInteractivo('mapa', {
			onReady: function() {
				var markerId = mapa.addMarker(new usig.Punto(102224.9040681,103284.11371559), true, "Texto de prueba");
				var markerId2 = mapa.addMarker('santa fe 2500');
				var markerId3 = mapa.addMarker('cabildo y juramento');
				var markerId4 = mapa.addMarker('corrientes 1530', false, 'Teatro Gral. San Martín');
				
				// Marcador con icono personalizado 
				var markerId5 = mapa.addMarker(
						'perú 652', 
						false, 
						'Banco<br/>Footer<br/>Footer<br/>Footer<br/>Footer<br/>Footer',
						{
							iconUrl: 'http://servicios.usig.buenosaires.gov.ar/symbols/mapabsas/bancos.png',
							iconWidth: 41,
							iconHeight: 41
							//,offsetX: -20
							//,offsetY: -20
						}
				);
			}
		});

		
	});	
	</script>
  </head>
  <body>
    <div id="page">
      <div id="header" data-role="header" data-position="fixed">
        <div id="logo"><h1>Mapa CABA</h1>
        </div>
      </div>
	  <div data-role="content" id="content" style="padding:0px">
	    <div id="mapa"></div>
		</div>
      <div id="footer" data-role="footer" data-position="fixed">
        <p>&copy; 2011-2012 USIG - Unidad de Sistemas de Información Geográfica</p>
      </div>
    </div>
  </body>
</html>
